<!DOCTYPE html>
<html class="ui-page-login">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <title></title>
    <link href="./mui/login/css/mui.min.css" rel="stylesheet" />
    <link href="./mui/login/css/style.css" rel="stylesheet" />

    <script src="./dece/js/app.js" type="text/javascript"></script>
    <script src="./dece/js/vue.js" type="text/javascript"></script>
    <script src="./dece/js/axios.min.js" type="text/javascript"></script>
    <style>
        .area {
            margin: 20px auto 0px auto;
        }
        .mui-input-group:first-child {
            margin-top: 20px;
        }
        .mui-input-group label {
            width: 22%;
        }
        .mui-input-row label~input,
        .mui-input-row label~select,
        .mui-input-row label~textarea {
            width: 78%;
        }
        .mui-checkbox input[type=checkbox],
        .mui-radio input[type=radio] {
            top: 6px;
        }
        .mui-content-padded {
            margin-top: 25px;
        }
        .mui-btn {
            padding: 10px;
        }
        
    </style>
</head>

<body>
    <div id="app">
        <header class="mui-bar mui-bar-nav">
            <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
            <h1 class="mui-title">注册</h1>
        </header>
        <div class="mui-content">
            <form class="mui-input-group">
                <div class="mui-input-row">
                    <label>手机</label>
                    <input v-model="form.mobile" type="text" class="mui-input-clear mui-input" placeholder="请输入手机">
                </div>
                <div class="mui-input-row">
                    <label>密码</label>
                    <input v-model="form.password" type="password" class="mui-input-clear mui-input" placeholder="请输入密码">
                </div>
                <div class="mui-input-row">
                    <label>确认</label>
                    <input v-model="form.repassword" type="password" class="mui-input-clear mui-input" placeholder="请确认密码">
                </div>
                <div class="mui-input-row">
                    <label>验证</label>
                    <input v-model="form.code" type="text" class="mui-input-clear mui-input" placeholder="请输入验证码">
                </div>
            </form>
            <div class="mui-content-padded">
                <button @click='reg' class="mui-btn mui-btn-block mui-btn-primary">注册</button>
            </div>
            <div class="mui-content-padded">
                <p>请填写正确的手机号完成注册，将收到的短信验证码填入。</p>
            </div>
        </div>
    </div>
    <script src="./mui/login/js/mui.min.js"></script>
    <script src="./mui/login/js/app.js"></script>
    <script>
        //mui初始化
        mui.init({
            swipeBack: true //启用右滑关闭功能
        });
        new Vue({
            el: "#app",
            data: {
                form: {
                    mobile: null,
                    password: null,
                    repassword: null,
                    code: null,
                },
            },
            created: function (){
            },
            mounted: function (){
            },
            methods: {
                reg: function (){
                    // 拾取数据
                    var request = de.pickData(this.form, ['mobile', 'password', 'repassword', 'code']);
                    // console.log(request);
                    axios.post(de.reg, request).then(function (data){
                        var dd = data.data;
                        // console.log(dd);
                        if (dd.code == 200) {
                            mui.alert(dd.info, '成功', '确定', function(){
                                de.href('./login.html');
                            }); 
                        } else {
                            mui.alert(dd.info, '失败', '确定'); 
                        }
                    }).catch(function(error){
                        console.log(error);
                    });
                }
            },
        });
    </script>
</body>

</html>